<html>
<head>
  <!--第一步：引入Javascript / CSS （CDN）-->
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">  <!-- DataTables CSS -->
  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>  <!-- DataTables -->
  <!--或者下载到本地，下面有下载地址
  <link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>
  <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
  -->
</head>
<body>
  <!--第二步：添加如下 HTML 代码-->
  <table id="t_id">
      <thead>
          <tr>
              <th>NAME</th>
              <th>SALARY</th>
              <th>OFFICE</th>
              <th>POSITION</th>
          </tr>
      </thead>
      <!--<tbody>
          <tr><td>电脑</td><td>￥10000</td></tr>
          <tr><td>桌子</td><td>￥2000</td></tr>
      </tbody>-->
  </table>
</body>
<script>
   function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;
 
        this.office = function () {
            return this._office;
        }
    };
 
    $('#t_id').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office()' },
            { data: 'position' }
        ]
    } );
    
  
</script>